<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8"/>
		<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
		<title>表单提交</title>
		<meta name="viewport" content="width=device-width, initial-scale=1"/>
		<meta name="renderer" content="webkit"/>
		<meta http-equiv="Cache-Control" content="no-siteapp"/>
		<meta name="apple-mobile-web-app-title" content="移动端描述内容"/>

		<script src="assets/perpageres/vue.min.js"></script>
		<script src="assets/perpageres/zepto.min.js"></script>
		<script src="assets/elementvue/elementuijs.js"></script>

		<script src="//at.alicdn.com/t/font_783249_e5yrsf08rap.js"></script>
		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-ui/lib/theme-chalk/index.css">
	</head>
	
	<body style="padding:0;margin:0;">
		<div id="VueBigBox" style="width:100%;font-size:14px;overflow-x:hidden;">
			<div style="text-align:center;background:#00a0e9;color:#FFF;
			font-size:18px;line-height:50px;font-weight:bold;position: fixed;width:100%;z-index:2;left:0;top:0;">能动乐学学员信息登记表</div>
			<div style="width:90%;margin:0 auto;padding-top:70px;">
				<div style="padding:10px;font-size:16px;padding-top:0;color:#999;font-weight:bold;"><span>本页信息为建立学生档案所需，仅供能动英语西安
胡家庙校区教学使用，请放心填写，感谢配合</span></div>
				<el-form :label-position="labelPosition" :model="ruleForm" :rules="rules" ref="ruleForm" label-width="130px" class="demo-ruleForm">
					<el-form-item label="1.孩子中文姓名" prop="name">
						<el-input v-model="ruleForm.name"></el-input>
					</el-form-item>
					<el-form-item label="2.性别" prop="sex">
						<el-radio-group v-model="ruleForm.sex">
							<el-radio label="1">男</el-radio>
							<el-radio label="2">女</el-radio>
						</el-radio-group>
					</el-form-item>
					<el-form-item label="3.所在班级" prop="ndclass">
						<el-select v-model="ruleForm.ndclass" placeholder="请选择所在班级" style="width:100%;">
							<el-option v-for="(item, index) in myClass" :label="item[1]" :value="item[0]"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="4.妈妈手机" prop="mobile_ma">
						<el-input type="number" v-model="ruleForm.mobile_ma" maxlength="11"></el-input>
					</el-form-item>
					<el-form-item label="5.爸爸手机" prop="mobile_ba">
						<el-input type="number" v-model="ruleForm.mobile_ba" maxlength="11"></el-input>
					</el-form-item>
					<el-form-item label="6.就读学校" prop="school">
						<el-select v-model="ruleForm.school" placeholder="请选择所在学校" style="width:100%;">
							<el-option v-for="(item, index) in mySchool" :label="item[1]" :value="item[1]"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="7.当前就读年级" prop="grade">
						<el-select v-model="ruleForm.grade" placeholder="请选择年级" style="width:100%;">
							<el-option label="一年级" value="一年级"></el-option>
							<el-option label="二年级" value="二年级"></el-option>
							<el-option label="三年级" value="三年级"></el-option>
							<el-option label="四年级" value="四年级"></el-option>
							<el-option label="五年级" value="五年级"></el-option>
							<el-option label="六年级" value="六年级"></el-option>
							<el-option label="幼儿园大班" value="幼儿园大班"></el-option>
							<el-option label="初中生" value="初中生"></el-option>
							<el-option label="其他" value="其他"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="8.学校英语教材" prop="english">
						<el-radio-group v-model="ruleForm.english">
							<el-radio label="人教版（三年级起步）" style="width:100%;padding:10px 0;">人教版（三年级起步）</el-radio>
							<el-radio label="人教版（一年级起步）" style="width:100%;padding:10px 0;">人教版（一年级起步）</el-radio>
							<el-radio label="外研社版" style="width:100%;padding:10px 0;">外研社版</el-radio>
							<el-radio label="清华版" style="width:100%;padding:10px 0;">清华版</el-radio>
							<el-radio label="目前学校没有英语课" style="width:100%;padding:10px 0;">目前学校没有英语课</el-radio>
						</el-radio-group>
					</el-form-item>
					<el-form-item label="9.对孩子期望" prop="hope" label-width="105px">
						<el-checkbox-group v-model="ruleForm.hope">
							<el-checkbox label="摆脱哑巴英语，听说读写能力提高" style="width:100%;">摆脱哑巴英语，听说读写能力提高</el-checkbox>
							<el-checkbox label="提高考试成绩，学校学习毫无压力" style="width:100%;">提高考试成绩，学校学习毫无压力</el-checkbox>
							<el-checkbox label="切实掌握英语，为出国学习做准备" style="width:100%;">切实掌握英语，为出国学习做准备</el-checkbox>
							<el-checkbox label="灵活使用英语，日常生活自如对话" style="width:100%;">灵活使用英语，日常生活自如对话</el-checkbox>
							<el-checkbox label="提高学习兴趣，英语从此不再抗拒" style="width:100%;">提高学习兴趣，英语从此不再抗拒</el-checkbox>
						</el-checkbox-group>
					</el-form-item>

					<el-form-item>
						<el-button type="primary" @click="submitForm('ruleForm')">提交表单</el-button>
						<el-button @click="resetForm('ruleForm')">重置</el-button>
					</el-form-item>
				</el-form>
			</div>
		</div>
	</body>
</html>
<script type="text/javascript">
	const validatePhone = (rule, value, callback) => {
		// 手机号码正则表达式
		const reg = /^1[3-9]\d{9}$/;
		if (reg.test(value)) {
			// 如果符合规则，则通过验证
			callback();
		} else {
			// 否则返回错误信息
			callback(new Error('手机号格式不正确'));
		}
	}
	const validatePhone222 = (rule, value, callback) => {
		if (value.length>2) {
			callback(new Error('最多只能选择两个期望'));
		} else {
			callback();
		}
	}
	var vue = new Vue({
		el: '#VueBigBox',
		data:{
			test:123456,
			resyesno: false,
			labelPosition:'left',
			myClass: [
				[1, "U1-01班"],
				[2, "U1-02班"],
				[3, "U1-03班"],
				[4, "U1-04班"],
				[5, "U1-05班"],
				[6, "U1-06班"],
				[7, "U1-07班"],
				[8, "U1-08班"],
				[9, "U1-09班"],
				[10, "U1-10班"]
			],
			mySchool: [
				[1, "悦美小学"],
				[2, "实验小学"],
				[3, "万科小学"],
				[4, "长安二小"],
				[5, "博雅小学"],
				[999, "其他"],
			],
			ruleForm:{
				name: '',
				sex:'',
				ndclass: '',
				mobile_ma:'',
				mobile_ba:'',
				school:'',
				grade:'',
				english:'',
				hope:[],
			},
			rules: {
				name: [
					{ required: true, message: '请输入孩子中文姓名', trigger: 'blur' },
				],
				sex: [
					{ required: true, message: '请选择性别', trigger: 'change' }
				],
				ndclass: [
					{ required: true, message: '请选择所在班级', trigger: 'change' }
				],
				mobile_ma: [
					{ required: true, message: '请输入妈妈手机', trigger: 'blur' },
					{ validator: validatePhone, trigger: 'blur' },
				],
				mobile_ba: [
					{ required: true, message: '请输入爸爸手机', trigger: 'blur' },
					{ validator: validatePhone, trigger: 'blur' },
				],
				school: [
					{ required: true, message: '请选择就读学校', trigger: 'change' }
				],
				grade: [
					{ required: true, message: '请选择当前就读年级', trigger: 'change' }
				],
				english: [
					{ required: true, message: '请选择英语教材', trigger: 'change' }
				],
				hope: [
					{ type: 'array', required: true, message: '请至少选择一个期望', trigger: 'change' },
					{ validator: validatePhone222, trigger: 'change' },
				],
			}
		},
		methods:{
			submitForm(formName) {
				var _this = this;
				this.$refs[formName].validate((valid) => {
					if (valid) {
						var jsonStr = JSON.stringify(vue.ruleForm)
						//console.log(vue.ruleForm, jsonStr);
						$.post('/index.php?s=/mobile/test/indbAjax', {"formObj":vue.ruleForm}, function (_res) {
							console.log(_res);
							if(_res.code==1){
								//_this.$alert(_res.data.msg);
								alert(_res.data.msg);
							}
						})
					} else {
						console.log('error submit!!');
						return false;
					}
				});
			},
			resetForm(formName) {
				this.$refs[formName].resetFields();
			}
		}
	});
</script>